<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>v-model实例</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model实例</h1>
    <hr/>
    <div id="app">
        <p>{{message}}</p>
        <p>
            <label>v-model</label>
            <input type="text" v-model="message" />
        </p>
        <hr/>
        <p>{{lazyMsg}}</p>
        <p>
            <label>v-model.lazy</label>
            <input type="text" v-model.lazy="lazyMsg" />
        </p>
        <p>懒加载会在失去焦点的时候再更新model的值</p>
        <hr/>
        <p>{{numberMsg}}</p>
        <p>
            <label>v-model.number</label>
            <input type="text" v-model.number="numberMsg"/>
        </p>
        <p>加载.number之后.值只会绑定为数字</p>
        <p>输入的时候,如果最开始不是以数字开头.会当做字符串来处理</p>
        <p>如果输入的是以数字开头的.会忽略非数字字符及后面的内容</p>
        <hr/>
        <p>({{trimMsg}})</p>
        <p>
            <label>v-model.trim</label>
            <input type="text" v-model.trim="trimMsg"/>
        </p>
        <p>.trim修饰符会忽略model前后的空格</p>
        <hr/>
        <label>textarea绑定</label> <br/>
        <div>{{areaMsg}}</div>
        <p><textarea v-model="areaMsg"></textarea></p>
        <hr/>
        <label>多选框绑定一个值</label><br/>
        <input type="checkbox" v-model="oneCheck"/>  <span>{{oneCheck}}</span>
        <hr/>
        <label>多选框绑定数组</label><br/>
        <p>
            <input type="checkbox" id="jspang" value="jspang" v-model="web_name"/>
            <label for="jspang">jspang</label>
            <input type="checkbox" id="panda" value="panda" v-model="web_name"/>
            <label for="panda">panda</label>
            <input type="checkbox" id="panpan" value="panpan" v-model="web_name"/>
            <label for="panpan">panpan</label>
        </p>
        <p>{{web_name}}</p>
        <hr/>
        <label>单选框绑定</label>
        <p>
             <input type="radio" id="man" value="man" v-model="sex"/>
             <label for="man">男</label>
             <input type="radio" id="wuman" value="wuman" v-model="sex"/>
             <label for="wuman">女</label>
        </p>
        <p>{{sex}}</p>
       
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!12121',
                lazyMsg: '你好.今天天气不错哟',
                numberMsg: 123,
                trimMsg: '初始值',
                areaMsg: '',
                oneCheck: true,
                web_name: [],
                sex: ''
            }
        });
    </script>

</body>
</html>